<template>
      <div class="menu-box">
          <div class="menu-item" v-for='menu in menus' :key='menu.key' @click='menuClick(menu)'>{{menu.name}}</div>
      </div>
</template>

<script>
export default {
    data: () => ({
        menus: [
            {key: 'newGame', name: '新游戏'},
            {key: 'loadGame', name: '读取存档'},
            {key: 'hallOfGame', name: '名人堂'},
            {key: 'exit', name: '退出游戏'},
        ],
        
        mp3: null,
    }),

    methods: {
        menuClick(item) {
            this[item.key]()
        },

        newGame() {
            this.$router.push('game')
        },

        loadGame() {

        },

        hallOfGame() {

        },

        exit(){
            window.GlobalMp3.pause()
            this.$router.go(-1)
        },



    }

}
</script>

<style lang="scss" scoped>
.menu-box{
    width: 100%;
    height: 100%;    
    position: absolute;
    top: 10vh;
    left: 5vw;
    width: 30vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
</style>>

</style>